<style>
    .preview_file.layui-container {
        width: 100%;
        overflow: auto;
        height: calc(100% - 53px);
    }

    .preview_file layui-code {
        max-height: calc(100vh - 170px);
        overflow: auto;
    }

    .dialog_footer {
        position: absolute;
        bottom: 0;
        text-align: right;
        box-sizing: border-box;
        width: 100%;
        padding: 7px 13px;
        border-top: 1px solid #eee;
        background-color: #FCFCFC;
    }

    .preview_file.h100, .h100 {
        height: 100%;
    }

    .preview_file .layui-card-body {
        height: calc(100% - 116px);
        overflow: auto;
    }

    .preview_file .preview_code {
        white-space: pre;
        min-width: fit-content;
    }

    .hljs-ln td.hljs-ln-code {
        padding-left: 10px;
    }
    .hljs-ln td.hljs-ln-numbers {
        padding-right: 10px;
    }
</style>
<div class="preview_file layui-container h100">
    <div class="layui-row h100">
        <div class="layui-col-md3 h100">
            <div class="layui-card  h100">
                <div class="layui-card-header">代码目录</div>
                <div class="layui-card-body">
                    <div id="file_list_tree"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md9  h100">
            <div class="layui-card  h100">
                <div class="layui-card-header">
                    <div id="file_name_title">文件名.ext</div>
                </div>
                <div class="layui-card-body h100">
                    <div class="preview_code"><code id="file_code_content">//代码显示区域</code></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="detail_form_footer">
    <a class="layui-btn btn-preview-download">下载</a>
    <a class="layui-btn layui-btn-primary btn-preview-cancle">关闭</a>
</div>
#set(generatorConfig = generatorModel.toGeneratorConfig())
<!-- @formatter:off -->
<script>
    layui.use('tree', function () {
        var $ = layui.$;
        var thisIndex = layer.index;
        var tree = layui.tree;
        //渲染
        var inst1 = tree.render({
            elem: '#file_list_tree'  //绑定元素
            , onlyIconControl: true
            , data: #(toJson(fileList))
            , click: function (obj) {
                if (!obj.data.children) {
                    layui.$('#file_name_title').text(obj.data.title)
                    layui.$.ajax({
                        url: '/generator/code/previewFile',
                        data: {
                            gid: '#(generatorModel.generator_id)',
                            path: obj.data.path,
                        },
                        traditional: true,
                        type: 'GET',
                        success: function (result) {
                            if (result.success) {
                                let $fileCodeContent = layui.$('#file_code_content');
                                $fileCodeContent.text(result.data);
                                $fileCodeContent.attr('class', obj.data.path.substr(obj.data.path.lastIndexOf('.')+1))
                                hljs.highlightBlock($fileCodeContent[0])
                                hljs.lineNumbersBlock($fileCodeContent[0]);
                            } else {
                                layer.msg('加载代码失败！' + result.message, {icon: 5});
                            }
                        }
                    });
                }
            }
        });
        $('.btn-preview-download').click(function(){
            window.open('/generator/code/download?generator_id=#(generatorModel.generator_id)');
        });
        $('.btn-preview-cancle').click(function(){
            layer.close(thisIndex);
        });
    });
</script>
<!-- @formatter:on -->